<template>
	<view class="box">
		<!-- #ifdef H5 || MP-WEIXIN  -->
		<view class="">
			<u-navbar :title="tit" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
				leftIconColor="#333" titleStyle="color:#333" bgColor="#transparent" @rightClick="right"
				@leftClick="leftClick"></u-navbar>
			<image class="indexbg"
				src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
				mode="aspectFill"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY  -->
		<NavTitle :title="tit"
			bgimg='https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png'
			:backgroundColor='backgroundColor'></NavTitle>
		<!-- #endif -->
		
		<view class="pep_wrap">
			<view class="pep_item" v-for="item in merberlist.slice(0,15) " :key="item.id" @click="gogroupnum">
				<image :src="item.avatar" mode="aspectFill"></image>
				<text>{{item.nickname}}</text>
			</view>
		</view>

		<view class="btn" v-if="(detail.group_type==8||detail.group_type==9)&&is_admin!=0" @click="goyq">
			邀请粉丝进群
		</view>
		<view class="btn" v-if="detail.group_type!=8||detail.group_type!=9" @click="goyq">
			邀请粉丝进群
		</view>
		<view class="wrap" @click="gogroupamend">
			<text>群信息</text>
			<u-icon name="arrow-right"  color="#666666" size="18"></u-icon>
		</view>
		<!-- 		<view class="wrap">
			<text>群公告</text>
			<u-icon name="arrow-right"  color="#666666" size="18"></u-icon>
		</view> -->
		<view class="wrap">
			<text>屏蔽群消息</text>
			<u-switch v-model="isflag" @change="changestatus" activeColor="#FFC300"
				inactiveColor="rgb(230, 230, 230)"></u-switch>
		</view>
		<view class="wrap" v-if="is_admin!=0">
			<text>群禁言</text>
			<u-switch v-model="isflag2" @change="changestatus2" activeColor="#FFC300"
				inactiveColor="rgb(230, 230, 230)"></u-switch>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<!--  -->
		<view class="wrap" @click="gohome" v-if="detail.group_type==8||detail.group_type==9">
			<text>查看商家详情</text>
			<u-icon name="arrow-right"  color="#666666" size="18"></u-icon>
		</view>
		<!-- #endif -->

		<view class="btn2"  @click="tipShow=true">
			退出群聊
		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定要退出群聊吗?</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="tipShow = false">再想想</text>
					<text @click="edit()">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		groupDetails,
		memberDetails,
		updateGroup,
		memberSetup,
		exitGroup
	} from "../../api/hx.js"
	import WebIM from "../../utils/WebIM.js"
	export default {
		data() {
			return {
				isflag: false,
				isflag2: false,
				groupid: "",
				merberlist: [],
				isjy: 0,
				detail: {},
				is_admin: "",
				tit: "",
				is_shield: "",
				backgroundColor: "",
				tipShow:false
				
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onLoad(option) {
			this.groupid = option.id
			this.groupdetail()
			// this.getdetail()
		},
		onReady() {
			// #ifdef MP-ALIPAY || MP-WEIXIN
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight;
					const btnInfo = uni.getMenuButtonBoundingClientRect()
					this.titleHeight = (btnInfo.top - this.statusBarHeight) * 2 + btnInfo.height
				}
			})
			// #endif
		
		},
		onShow() {
			this.getdetail()
		},
		methods: {
			edit(){
				exitGroup({
					hx_group_id:this.groupid
				}).then(res=>{
					if(res.code==1){
						let options = {
							// 会话 ID：单聊为对方的用户 ID，群聊为群组 ID。
							channel: this.groupid,
							// 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
							chatType: `groupChat`,
							// 删除会话时是否同时删除服务端漫游消息。
							deleteRoam: true,
						};
						uni.WebIM.conn
							.deleteConversation(options)
							.then((res) => {
								
								setTimeout(()=>{
									uni.switchTab({
										url:"/pages/index/chat"
									})
								},1000)
								console.log(res);
							})
							.catch((e) => {
								// 删除失败。
							});
					}
					uni.$u.toast(res.msg)
				})
			},
			gohome() {
				console.log(this.detail);
				if (this.detail.group_type == 8) {
					uni.navigateTo({
						url: "/pagesMy/groundCat/merchantHomepagew?id=" + this.detail.seller.id
					})
				} else if (this.detail.group_type == 9) {
					uni.navigateTo({
						url: "/pagesMy/cloudCat/shopDetails?id=" + this.detail.seller.id
					})
				}
			},
			goyq() {
				uni.navigateTo({
					url: "/pageDao/groupchat/invitemember?id=" + this.groupid
				})
			},
			pb() {
				memberSetup({
					hx_group_id: this.groupid,
					is_shield: this.is_shield
				}).then(res => {
					if (res.code == 1) {
						this.getdetail()
					}
					uni.$u.toast(res.msg)
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			gogroupamend() {
				uni.navigateTo({
					url: "/pageDao/groupchat/groupamend?id=" + this.groupid
				})
			},
			up() {
				updateGroup({
					hx_group_id: this.groupid,
					mute: this.isjy,
				}).then(res => {
					if (res.code == 1) {
						this.getdetail()
					}
					uni.$u.toast(res.msg)

				})
			},
			getdetail() {
				groupDetails({
					hx_group_id: this.groupid
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
						this.is_admin = res.data.group_user_one.is_admin
						this.is_shield = res.data.group_user_one.is_shield
						if (this.is_shield == 0) {
							this.isflag = false
						}
						if (this.is_shield == 1) {
							this.isflag = true
						}
						if (res.data.mute == 0) {
							this.isflag2 = false
						}
						if (res.data.mute == 1) {
							this.isflag2 = true
						}

						this.tit = `${this.detail.name}(${this.detail.member_number}人)`
					}
					console.log(res)
				})
			},
			groupdetail() {
				memberDetails({
					hx_group_id: this.groupid,
					page: 1
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.merberlist = res.data.data
					}


				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},

			gogroupnum() {
				uni.navigateTo({
					url: "/pageDao/groupchat/groupnum?id=" + this.groupid
				})
			},
			changestatus(e) {
				if (e == true) {
					this.is_shield = 1
					const options = {
						conversations: [{
							conversationId: this.groupid,
							conversationType: 'groupChat'
						}],
						mark: 0,
					}

					uni.WebIM.conn.addConversationMark(options).then(() => {
						console.log('addConversationMark success')
					})
					this.pb()
				}
				if (e == false) {
					this.is_shield = 0
					const options = {
						conversations: [{
							conversationId: this.groupid,
							conversationType: 'groupChat'
						}],
						mark: 0,
					}

					uni.WebIM.conn.removeConversationMark(options).then(() => {
						console.log('removeConversationMark success')
					})
					this.pb()
				}
				console.log(e)
			},
			changestatus2(e) {
				if (e == false) {
					this.isjy = 0
					this.up()
				}
				if (e == true) {
					this.isjy = 1
					this.up()
				}
			}
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss">
	.box {
		width: 750rpx;

	}

	/deep/.u-navbar__content {
		background: transparent !important;
	}

	/deep/.u-navbar__content__title {
		width: 600rpx;
		font-size: 28rpx !important;
	}

	.pep_wrap {
		width: 750rpx;
		max-height: 500rpx;
		margin-top: 40rpx;
		// background-color: red;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		position: relative;
		z-index: 10;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 460rpx;

	}

	.pep_item {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		position: relative;
		z-index: 10;

		>image {
			width: 100rpx;
			border-radius: 50%;
			height: 100rpx;
		}

		>text {
			margin-top: 20rpx;
			text-align: center;
			width: 130rpx;
			white-space: nowrap;
			/* 防止文本换行 */
			overflow: hidden;
			/* 隐藏溢出的文本 */
			text-overflow: ellipsis;
			/* 当文本溢出时显示省略号 */
			font-size: 26rpx;
			color: #999999;
		}
	}

	.tit {
		font-weight: 400;
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-top: 40rpx;
		position: relative;
		z-index: 10;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		border: 2rpx solid #FFC300;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFC300;
		text-align: center;
		line-height: 88rpx;
		margin: 0 auto;
		margin-top: 46rpx;
		position: relative;
		z-index: 10;
	}

	.wrap {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		height: 80rpx;
		justify-content: space-between;
		position: relative;
		z-index: 10;

		>text {
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
		}
	}

	.btn2 {
		width: 696rpx;
			height: 80rpx;
			background: linear-gradient( 270deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 20rpx;
		height: 30rpx;
	}
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	
	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border: 1rpx solid #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}
	
	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}
</style>